export const detail = {
    header: `
  ## \`测试组件，请谨慎使用\`
  # PrizeWheel 
  
  > 转盘组件大致分为三部分（三明治结构）：底部轮盘背景为img图片；中间为canvas，顶部指针为图片
  `,
    codeExample: [
      {
        title: '### 类型 / 尺寸 / 状态',
        code: `
  import React from 'react';
  import { PrizeWheelPage } from 'ararin-cmp-mobile'
  
  class PrizeWheelPage extends React.Component<any, any> {

        constructor(props: any) {
            super(props)
            
            this.state = {
                data: [
                    {
                        title: '1元',
                        img: './imgs/present_01.png',
                        bgColor: '#FDEEBD',
                        txtColor: '#fa4445'
                    },
                    {
                        title: '1元',
                        img: './imgs/present_01.png',
                        bgColor: '#FFC200',
                        txtColor: '#fa4445'
                    },{
                        title: '2元',
                        img: './imgs/present_02.png',
                        bgColor: '#FDEEBD',
                        txtColor: '#fa4445'
                        
                    },{
                        title: '5元',
                        img: <img src="./imgs/present_05.png" alt=""/>,
                        bgColor: '#FFC200',
                        txtColor: '#fa4445'

                    },{
                        title: '10元',
                        img: './imgs/present_10.png',
                        bgColor: '#FDEEBD',
                        txtColor: '#fa4445'

                    },{
                        title: '1000元',
                        img: './imgs/present_1000.png',
                        bgColor: '#FFC200',
                        txtColor: '#fa4445'
                    }
                ],
                value: 2
            }
        }

        lottery = async() => await new Promise<any>((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    flag: true,
                    index: Math.floor(Math.random()* 5)
                })
            }, 1000)
        })
        
        getResetStyle = () => \`\`
        
        render() {
            return (
                    <>
                        <style dangerouslySetInnerHTML={{__html: this.getResetStyle()}}/>
                        <div className="phone_prizeWheel" style={{padding: '7vw 5vw 10vw', background: '#fff'}}>
                            <PrizeWheel 
                                onClick={this.lottery}
                                arrowStyle={{top: '48%'}}
                                arrowImg={<img src={require('@/images/lottery_arrow.png')} alt=""/>}
                                data={this.state.data}
                                successFun={v => console.log(v)}
                                failedFun={() => console.log('failed')}
                            />
                        </div>
                    </>
            );
        }
    }
  
  export default App;`
      }
    ],
    pramsDetail: `
  
----

### 参数设置

| 参数 / params | 描述 / description  | 类型 / type |
| ------------- | -------------- | ---------------- |
| icon | 控制按钮内图标样式，传入组件库封装的 \`Icon\`组件，详情见\`Icon\`组件 | \`<Icon />\` |
| size | 组件大小，参数可选： \`'sm' 丨 'md' 丨 'lg'\` | \`string\` |
| type | 组件类型，影响颜色，参数可选：\`'primary' 丨 'default' 丨 'warning' 丨 'danger' 丨 'link' 丨 'success'\` | \`string\` |
| className | class类名，与React一致 | \`string\` |
| activeClassName | 点击时类名 | \`React.CSSProperties\` |
| disabled | 是否不可点击 | \`boolean\` |
| state | 可选参数：\`'loading' 丨 'static' 丨 'disabled' 丨 'failed'\` | \`string\` |
| ripple | 水波纹效果 | \`boolean\` |
| href | 跳转url，\`'loading'\` 或 \`disabled\`时无效 | \`string\` |
| style | 样式，与React一致 | \`React.CSSProperties\` |
| activeStyle | 点击反馈颜色加深时的颜色 | \`React.CSSProperties\` |
    `
  }
  